<style lang="scss" scoped>
.head-box {
  display: flex;
  width: 100%;
  padding: 0.2rem 0.3rem;
  background-color: #ffffff;

  .avatar {
    display: flex;
    flex-basis: 30%;
    align-items: center;
    justify-content: flex-start;
  }

  .infomation {
    display: flex;
    flex-basis: 50%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-left: 0.2rem;
    font-size: 0.28rem;

    .name {
      font-size: 0.34rem;
      padding-bottom: 0.2rem;
    }
  }

  .edit {
    display: flex;
    flex-basis: 20%;
    align-items: center;
    justify-content: flex-end;
  }
}

.logout-box {
  position: absolute;
  bottom: 100px;
  left: 0;
  width: 100%;
  padding: 0 .2rem;
}
</style>

<template>
  <div class="container hasNav hasTabbar">
    <van-nav-bar title="个人中心" fixed />
    <div class="head-box">
      <div class="avatar">
        <van-image width="1.6rem" height="1.6rem" :src="form.headPic" round></van-image>
      </div>
      <div class="infomation">
        <p class="name">{{ form.username || '' }}</p>
        <p>用户账号：{{ form.mobile || '' }}</p>
      </div>
      <div class="edit" @click="$router.push('/user/UserInfo')">
        <van-icon name="arrow" size="0.3rem" />
      </div>
    </div>
    <van-cell icon="manager-o" title="认证中心" is-link to="/user/UserInfo" />
    <van-cell icon="edit" title="修改密码" is-link to="/editPassword" />
    <van-cell icon="manager-o" title="关于我们" is-link to="/common/about" />
    <div class="logout-box">
      <van-button type="default" color="#179AFE" block @click="logout">退出</van-button>
    </div>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Tabbar from '@/components/Tabbar';
import { getUserInfo } from "../../api/user";
const fileUrl = process.env.VUE_APP_FILE_URL;

function isNull(val) {
  return val === '' || !val
}

export default {
  name: 'UserIndex',
  components: {
    Tabbar
  },
  data() {
    return {
      fileApi: fileUrl,
      form: {
        headPic: null,
        username: null,
        mobile: null,
      },
    };
  },
  mounted() {
    this.getDetail();
  },
  methods: {
    async getDetail() {
      try {
        this.loading = true;
        const { code, message, data } = await getUserInfo();
        if (code == 200) {
          this.form.headPic = !isNull(data.headPic) ? fileUrl + data.headPic : '';
          this.form.username = !isNull(data.username) ? data.username : '';
          this.form.mobile = !isNull(data.mobile) ? data.mobile : '';
        } else {
          this.$toast(message);
        }
        this.$nextTick(() => {
          this.loading = false;
        });
      } catch (error) {
        console.log(error);
        this.loading = false;
      }
    },

    logout() {
      this.$store.dispatch('handleLogout');
      this.$toast('退出成功');
      this.$router.replace('/');
    }
  }
};
</script>
